/*
 * @Author: shiguo
 * @Date: 2022-04-29 17:48:20
 * @LastEditors: shiguo
 * @LastEditTime: 2022-04-29 17:57:17
 * @FilePath: /@aks/easyui/lib/StickHeaderView/demo.tsx
 */
import React from 'react'
import { View, StyleSheet, TouchableOpacity, Text, Animated } from 'react-native'
import { px2dp } from '../../screen/px2dp'
import { px2sp } from '../../screen/px2sp'

import StickHeaderView from './StickHeaderView'
import WithLoadingContainer from '../WithLoadingContainer/WithLoadingContainer'
import { Status } from '../WithLoadingContainer'
export default ({ }) => {


    const scrollY = React.useRef(new Animated.Value(0)).current;
    const headHeight = React.useRef(-1);




    return (
        <View style={styles.container}>
            <Animated.ScrollView
                style={{ flex: 1 }}
                onScroll={
                    Animated.event(
                        [{
                            nativeEvent: { contentOffset: { y: scrollY } } // 记录滑动距离
                        }],
                        // {
                        //     useNativeDriver: true,
                        //     listener: (event) => {
                        //         let ey = (event.nativeEvent as any)?.contentOffset?.y as number;

                        //     }
                        // }
                    ) // 使用原生动画驱动
                }
                scrollEventThrottle={1}
            >




                <View onLayout={(e) => {
                    let { height } = e.nativeEvent.layout;
                    // setViewModel({ headHeight: height }); // 给头部高度赋值
                    headHeight.current = height
                }}>
                    {/* <Calendar/> */}

                </View>

                <StickHeaderView
                    // stickyHeaderY={viewModel.headHeight} // 把头部高度传入
                    // stickyScrollY={viewModel.scrollY}  // 把滑动距离传入
                    stickyHeaderY={headHeight.current} // 把头部高度传入
                    stickyScrollY={scrollY}  //
                >
                    <View >

                        <Text style={{ fontSize: px2sp(16), color: '#333', marginLeft: px2dp(30) }}>当日计划</Text>

                    </View>

                </StickHeaderView>


                <WithLoadingContainer
                    status={Status.SUCCESS}
                    emptyText={'今日无需巡检'}
                >

                    {Array(30).fill('')?.map((i, index) => <Item key={`sg-item-${index}`} item={i} index={index} />)}
                </WithLoadingContainer>
            </Animated.ScrollView>
        </View>
    )
}



const Item = (props: { item: any, index: number }) => {
    return (
        <TouchableOpacity >



        </TouchableOpacity>
    )
}


const styles = StyleSheet.create({
    container: {


    },

})
